<template>
  <div class="sortview-bg" v-show="isshow" @click="sortBg">
    <div class="sort-menu">
        <a class="sort-time" @click="sortTime($event)">
          <i class="fa fa-calendar" aria-hidden="true"></i>
          <span>按事件分类</span>
        </a>
        <a class="sort-tag" @click="sortTag($event)">
          <i class="fa fa-tags" aria-hidden="true"></i>
          <span>按标签分类</span>
        </a>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isshow: false
    }
  },
  props: ['sortview'],
  methods: {
    sortTime (event) {
    },
    sortTag (event) {
    },
    sortBg () {
      this.isshow = !this.isshow
      this.$emit('on-change-show', this.isshow)
    }
  },
  watch: {
    sortview () {
      this.isshow = this.sortview
    }
  }
}
</script>
<style scoped>
.sort-time{
  margin-bottom: 10px;
}
.sort-menu{
  display: flex;
  flex-direction: column;
  background-color: black;
  padding: 10px 10px;
  height: 56px;
  border-radius: 3px;
  margin-right: 3%;
}
.sort-menu::before{
  position: absolute;
  right: 6.6%;
  top: 36px;
  content: '';
  border-left: 10px solid transparent;
  border-bottom: 10px solid black;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
}
  .sortview-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 20000;
    padding-top: 55px;
    display: flex;
    justify-content: flex-end;
  }
</style>
